<template>
  <div class="debug-component">
    <h2>Vue3 选项式组件调试</h2>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="toggleOverlay">显示 Overlay</button>

    Teleport 目标
    <div id="teleport-target">
      <p>这里是 teleport 目标区域</p>
    </div>

    <!-- Overlay -->
    <van-overlay v-if="isTargetReady" v-model:show="showOverlay" :teleport="teleportTarget"
      style="position: absolute; overflow: hidden;">
      <div class="overlay-content">
        <p>这是一个通过 teleport 渲染的 Overlay</p>
        <button @click="showOverlay = false">关闭</button>
      </div>
    </van-overlay>
  </div>
</template>

<script>
// import { ref, onMounted } from 'vue';

export default {
  name: 'DebugComponent',

  data() {
    return {
      count: 0,
      showOverlay: false,
      teleportTarget: '#teleport-target',
      isTargetReady: false,
    };
  },

  methods: {
    increment() {
      this.count++;
    },
    toggleOverlay() {
      this.showOverlay = !this.showOverlay;
    },
  },

  mounted() {
    const targetElement = document.querySelector(this.teleportTarget);
    if (targetElement) {
      this.isTargetReady = true;
    } else {
      console.error('Teleport target element not found!');
    }
  },
};
</script>

<style scoped>
.debug-component {
  display: block;
  padding: 20px;
}

.overlay-content {
  background: white;
  padding: 20px;
  text-align: center;
}

#teleport-target {
  position: relative;
  margin-top: 10px;
  display: flex;
  /* background: #f0f0f0; */
  /* width: 100%; */
  height: 200px;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
</style>